<template>
  <div class="container">
    <div class="index">
      <el-row :gutter="10">
        <el-col :span="8">
          <data-panel title="港口概况">
            <div class="main flex fdc">
              <el-row :gutter="10" class="flex1">
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-data"
                    backgroundColor="#5470c6"
                    text="堆场面积(亩)"
                    :value="baseInfo.areaCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-finance"
                    backgroundColor="#91cc75"
                    text="货物种类(种)"
                    :value="baseInfo.germplasmCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-grid"
                    backgroundColor="#fac858"
                    text="堆场数量(块)"
                    :value="baseInfo.diCount"
                    class="flex1"
                  ></data-box
                ></el-col>
              </el-row>
              <el-row :gutter="10" class="margin-top-10 flex1">
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-custom"
                    backgroundColor="#ee6666"
                    text="人员总数(位)"
                    :value="baseInfo.employeeCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-claim"
                    backgroundColor="#73c0de"
                    text="存放批次(批)"
                    :value="baseInfo.batchCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-shop"
                    backgroundColor="#3ba272"
                    text="存放总次(次)"
                    :value="baseInfo.pengCount"
                    class="flex1"
                  ></data-box
                ></el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="货物统计" more="更多设备" link="Device">
            <div class="main">
              <div ref="deviceChart" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="堆场数量" more="更多种植批次" link="Batch">
            <div class="main">
              <div ref="plantChart" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="margin-top-10">
        <el-col :span="8">
          <data-panel title="调度统计" more="更多调度情况" link="TraceRF">
            <div class="main">
              <div ref="traceChart" class="h100"></div>
            </div>
          </data-panel>
          <data-panel
            title="货位分配统计"
            more="更多分配情况"
            link="Task"
            class="margin-top-10"
          >
            <div class="main">
              <el-row class="h100" :gutter="10">
                <el-col :md="10" class="h100"
                  ><div ref="taskChart" class="h100"></div
                ></el-col>
                <el-col
                  :md="7"
                  v-for="item in taskInfo"
                  :key="item.name"
                  class="h50 flex fdc jcsa"
                >
                  <data-box
                    icon="el-icon-s-promotion"
                    backgroundColor="red"
                    :text="item.name + '(条)'"
                    :value="item.value"
                    :isBorder="false"
                    :isIcon="false"
                  ></data-box>
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="16">
          <data-panel title="分区地图" more="分区地图" link="Map">
            <div class="mapMain">
              <div id="indexMap" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
      </el-row>
    </div>
    <!-- 浮动选择基地 -->
    <base-select v-model="baseId" :type="2"></base-select>
  </div>
</template>

<script>
import {
  selectBaseInfo,
  selectDeviceInfo,
  selectBatchInfo,
  selectTaskInfo,
} from "@/api/agriculture/dataStatistics";
import { selectRecordGroupByMonth } from "@/api/trace/dataStatistics";
import { listLand } from "@/api/agriculture/land";
import { listDevice } from "@/api/iot/device";

import DataPanel from "./components/DataPanel";
import DataBox from "./components/DataBox";

export default {
  name: "",
  components: {
    DataPanel,
    DataBox,
  },
  data() {
    return {
      baseId: null,
      landList: [],
      deviceList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      baseInfo: {
        areaCount: 0,
        germplasmCount: 0,
        diCount: 0,
        employeeCount: 0,
        batchCount: 0,
        pengCount: 0,
      },
      taskInfo: [],
    };
  },
  watch: {
    baseId: {
      handler: function (n) {
        this.baseId = n;
        this.$nextTick(() => {
          this.initPage();
        });
      },
    },
  },
  async mounted() {
    //this.initPage();
  },
  methods: {
    /** 初始化页面 */
    async initPage() {
      this.initMap();
      await this.getBaseInfo();
      this.initDeviceChart();
      this.initBatchChart();
      this.initTraceChart();
      this.initTaskChart();
      await this.getDeviceList();
      await this.getLandList();
      this.addFeatures();
    },
    /** 初始化map */
    async initMap() {
      this.map = new this.AMap.Map("indexMap", {
        //设置地图容器id
        //pitch: 40,
        viewMode: "3D", //是否为3D地图模式
        mapStyle: "amap://styles/802500eb9c17892dd91047988cc1ece1",
        zoom: 16, //初始化地图级别
        //center: this.$zb, //初始化地图中心点位置
        layers: [new this.AMap.TileLayer.Satellite()],
      });
      /** 添加空间 控件 */
      this.map.addControl(new this.AMap.Scale());
      //this.map.addControl(new AMap.ToolBar());
      this.map.addControl(new this.AMap.MapType());
    },
    /** 获取地块列表 */
    async getLandList() {
      const { rows } = await listLand({ baseId: this.baseId });
      this.landList = rows;
    },
    /** 获取设备列表 */
    async getDeviceList() {
      const { rows } = await listDevice({ baseId: this.baseId });
      this.deviceList = rows;
    },
    /** 地图添加覆盖 */
    addFeatures() {
      this.landList.forEach((item) => {
        let {
          landPath,
          fillColor,
          fillOpacity,
          strokeColor,
          strokeOpacity,
          strokeWeight,
          landName,
        } = item;
        let path =
          landPath && landPath.split("|").map((item) => item.split(","));
        let centerPoint = this.getAreaCenter(path);
        if (path) {
          this.map.add(
            new this.AMap.Polygon({
              path,
              fillColor,
              fillOpacity,
              strokeColor,
              strokeOpacity,
              strokeWeight,
            })
          );
          this.map.add(
            new this.AMap.Text({
              position: centerPoint,
              anchor: "center",
              text: landName,
              style: { background: "none", border: "none", color: "#fff" },
            })
          );
        }
      });
      this.deviceList.forEach((device) => {
        // console.log(this.baseUrl+device.imgUrl[1])
        if (device.longitude && device.latitude) {
          let marker = new this.AMap.Marker({
            icon: new this.AMap.Icon({
              image: this.baseUrl + device.imgUrl.split(",")[1],
              imageSize: new this.AMap.Size(26, 26),
            }),
            position: [device.longitude, device.latitude],
            title: device.deviceName,
            anchor: "bottom-center",
            extData: {
              device: device,
            },
          });
          marker.on("click", ({ target }) => {
            const { deviceId, productId, isCamera } =
              target._opts.extData.device;
            this.$router.push({
              path: "/iot/device-view",
              query: {
                t: Date.now(),
                deviceId: deviceId,
                productId: productId,
                isCamera: isCamera,
              },
            });
          });
          this.map.add(marker);
        }
      });
      this.map.setFitView();
    },
    /** 计算地块中心点 */
    getAreaCenter(points) {
      var total = points.length;
      var X = 0,
        Y = 0,
        Z = 0;
      points.forEach((lnglat) => {
        var lng = (lnglat[0] * Math.PI) / 180;
        var lat = (lnglat[1] * Math.PI) / 180;
        var x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      var Lng = Math.atan2(Y, X);
      var Hyp = Math.sqrt(X * X + Y * Y);
      var Lat = Math.atan2(Z, Hyp);
      return [
        parseFloat((Lng * 180) / Math.PI),
        parseFloat((Lat * 180) / Math.PI),
      ];
    },
    /** 设备统计图表 */
    async initDeviceChart() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}台(占比{d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "middle",
          data: [],
        },
        series: [
          {
            name: "设备统计",
            type: "pie",
            // radius: ["60%", "70%"],
            center: ["60%", "50%"],
            color: ["#f2ca6b", "#9eca7f", "#de6e6a", "#85bedb"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //设备信息
      const { rows } = await selectDeviceInfo(this.baseId);
      option.legend.data = [];
      rows.forEach((item) => {
        option.legend.data.push(item.name);
      });
      option.series[0].data = rows;
      let myChart = this.$echarts.init(this.$refs.deviceChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 种植情况统计 */
    async initBatchChart() {
      let option = {
        tooltip: {
          trigger: "axis", // 触发类型，'axis'表示坐标轴触发
          formatter: "{c}亩",
        },
        label: {
          show: true, //开启显示
          position: "top", //在上方显示
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true, // 确保标签也被包含在计算布局中
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}亩", // 为纵坐标的每个值添加"m"作为单位
          },
        },
        series: [
          {
            data: [],
            color: ["#f2ca6b", "#9eca7f", "#de6e6a", "#85bedb"],
            type: "bar",
            barWidth: 20,
          },
        ],
      };
      const { rows } = await selectBatchInfo(this.baseId);
      option.xAxis.data = [];
      option.series[0].data = [];
      rows.forEach((item) => {
        option.xAxis.data.push(item.name);
        option.series[0].data.push(item.value);
      });
      let myChart = this.$echarts.init(this.$refs.plantChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 溯源情况统计 */
    async initTraceChart() {
      let option = {
        tooltip: {
          trigger: "axis", // 触发类型，'axis'表示坐标轴触发
          formatter: "{c}次",
        },
        label: {
          show: true, //开启显示
          position: "top", //在上方显示
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true, // 确保标签也被包含在计算布局中
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}次", // 为纵坐标的每个值添加"m"作为单位
          },
        },
        series: [
          {
            data: [],
            color: ["#f2ca6b", "#9eca7f", "#de6e6a", "#85bedb"],
            type: "bar",
          },
        ],
      };
      const { rows } = await selectRecordGroupByMonth(this.baseId);
      option.xAxis.data = [];
      option.series[0].data = [];
      rows.forEach((item) => {
        option.xAxis.data.push(item.name);
        option.series[0].data.push(item.value);
      });
      let myChart = this.$echarts.init(this.$refs.traceChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 农事任务统计 */
    async initTaskChart() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "完成情况",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "70%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              formatter: [],
              rich: {
                a: {
                  fontSize: "30px",
                  fontWeight: "bold",
                },
                b: {
                  color: "#666",
                  lineHeight: 40,
                },
              },
            },
            data: [],
          },
        ],
      };
      const { rows } = await selectTaskInfo(this.baseId);
      //填充数据
      option.series[0].data = rows;
      let myChart = this.$echarts.init(this.$refs.taskChart);
      //图表中间的合计
      let total = rows.reduce((sum, item) => sum + item.value, 0);
      option.series[0].label.formatter = [`{a|${total}}`, `{b|${"合计"}}`].join(
        "\n"
      );
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
      this.taskInfo = rows;
    },
    /** 获取基地情况统计 */
    async getBaseInfo() {
      if (this.baseId) {
        //基地信息
        const res = await selectBaseInfo(this.baseId);
        this.baseInfo = res.rows[0];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$margin: 10px;
.container {
  background: #edeef0;
  overflow: hidden;
}
.index {
  height: calc(100vh - 84px - #{$margin} * 2);
  margin: $margin;
}
.main {
  box-sizing: border-box;
  height: calc((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3);
  padding: 10px;
}
.mapMain {
  box-sizing: border-box;
  height: calc(
    ((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3) * 2 + #{$margin} + 51px
  );
  padding: 5px;
  min-height: calc(180px * 2 + #{$margin} + 51px);
}
</style>
